<template>
	<view>
		<view class="static cu-bar" v-if="show">
		</view>
		<view class="bottom-menu menu-main shadow cu-bar tabbar" v-if="show">
			<view @click="toUrl(item.url)" class="action" v-for="(item, index) in menuList" :key="index" :url="route == item.url ? '' : item.url">
				<text class="text-xxl" style="margin-left: auto;margin-right: auto;" :class="[route == item.url ? 'select' + ' ' + item.icons : 'no-select ' + item.icon]"></text>
				<view style="margin-top: 2px;" :class="[route == item.url ? 'select' : 'no-select ']">{{item.label}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				show: false,
				route: '',
				menuList: this.$config.menuList
			};

		},
		created() {
			this.route = '/' + getCurrentPages()[getCurrentPages().length - 1].route;
			uni.hideTabBar({
				success: () => {
					this.show = true;
				}
			});
		},
		methods: {
			toUrl(url) {
				if (url != this.route) {
					uni.switchTab({
						url: url,
					})
				}
			}
		},
		onLoad() {

		}
	};
</script>

<style lang="scss">
	@import "@/color-ui/main.css";

	.menu-main {
		// border-top: 1rpx #FFFFFF solid;
		bottom: 0;
		width: 100%;
		// height: 100rpx;
		position: fixed;
		left: 0;
		white-space: nowrap;
		box-sizing: border-box;
		overflow: hidden;
		// line-height: 100rpx;
		z-index: 9999;

		.my-tab-item {
			display: inline-block;
			width: 25%;
			text-align: center;

			.icon {
				margin-top: 10rpx;
			}

			.text {
				font-size: 20rpx;
			}
		}

		.active {
			font-size: larger;
		}
	}

	.static {
		position: static!important;
	}
</style>
